<template>
	<view class="container">
		<view :class="active ? 'content' : ''" @click="onClick">
			<view :class="active ? 'box_checked' : 'box_uncheck'">
				<text class="text-sm">{{data.title}}</text>
			</view>
		</view>
	</view>
	
</template>
<script>
	export default {
		name: "packing-box",

		props: {
			data: Object,
			active: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			onClick() {
				console.log('data>>', this.data)
				this.$emit("packingBoxClick", this.data);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container{
		margin-bottom: 20rpx;
		width: 200rpx;
		height: 100rpx;
	}
	.content {

		position: relative;
		right: 0;
		bottom: 0;
	

		&:before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			border: 16px solid;
			border-color: #256dfc;
			border-bottom-color: transparent;
			border-left-color: transparent;
		}

		&:after {
			content: "";
			width: 4px;
			height: 8px;
			position: absolute;
			right: 4px;
			top: 2px;
			border: 2px solid #fff;
			border-top-color: transparent;
			border-left-color: transparent;
			transform: rotate(45deg);
		}
	}

	.box_checked {

		width: 200rpx;
		height: 100rpx;
		background: #ffffff;
		color: #333333;
		border: 1px solid;
		border-color: #256dfc;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}

	.box_uncheck {
		width: 200rpx;
		height: 100rpx;
		background: #ffffff;
		color: #333333;
		border: 1px solid;
		border-color: $uni-border-color;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}
</style>